<template>
    <div>
        <h2>演示input v-model</h2>
        <input type="text" v-model="message">
        <p>输入的内容是：{{ message }}</p>

        <input type="text" v-model.lazy="messageLazy">
        <p>输入的内容是(失焦后变化)：{{ messageLazy }}</p>

        <h2>演示radio v-model</h2>
        <div>
            <input type="radio" v-model="radioValue" value="html" id="html"><label for="html">HTML</label>
            <input type="radio" v-model="radioValue" value="javascript" id="javascript"><label for="javascript">javascript</label>
            <input type="radio" v-model="radioValue" value="css" id="css"><label for="css">CSS</label>
        </div>


        <h2>演示 checkbox v-model</h2>
        <div>
            <input type="checkbox" v-model="checkboxValue" value="html5" id="html5"><label for="html5">HTML5</label>
            <input type="checkbox" v-model="checkboxValue" value="es6" id="es6"><label for="es6">es6</label>
            <input type="checkbox" v-model="checkboxValue" value="Java" id="Java"><label for="Java">Java</label>
        </div>


        <h2>演示 select v-model</h2>
        <select v-model="selected">
            <option>html</option>
            <option value="js">Javascript</option>
            <option>css</option>
        </select>

        <h2>演示 multiple select v-model</h2>
        <select v-model="multipleSelected" multiple>
            <option>html</option>
            <option value="js">Javascript</option>
            <option>css</option>
        </select>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                message: "",
                messageLazy: "",
                radioValue: "javascript",
                checkboxValue: ["es6", "Java"],
                selected: "css",
                multipleSelected: ["html", "js"]
            }
        },
        methods: {

        }
    }
</script>
<style scoped>
    h2{
        margin: 30px 0;
    }
</style>